<template>
    <view class="container">
        <z-paging ref="paging" v-model="list" @query="upCallback">
            <template #top>
                <!-- 导航 -->
                <u-navbar is-back title-bold>
                    <view class="slot-wrap">
                        <text class="u-margin-left-20" :class="{ selected: orderType === 0 }" @click="queryOrderList">销售订单</text>
                        <!-- <text class="o-margin-left-sl" :class="{ selected: orderType === 1 }" @click="querySampleList" v-if="!isVisitor">样品订单</text> -->
                    </view>
                    <template #right>
                        <view class="filter-btn" @click="filter">筛选</view>
                    </template>
                </u-navbar>
                <view class="metabs">
                    <u-tabs-swiper activeColor="#333333" ref="tabs" :current="current" :list="tabsList" @change="tabsChange" zIndex="4"></u-tabs-swiper>
                    <view class="search-bar">
                        <u-field icon="search" placeholder="商品名称/订单号/收货人姓名" v-model="keyword" :border-bottom="false" label-width="30" :clearable="false" @confirm="search"></u-field>
                    </view>
                </view>
            </template>
            <manage-page :list="list" @cancel="cancelTheOrder" @receive="downCallback" @scroll="scroll" />
        </z-paging>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { computed, reactive, ref } from 'vue'
import { useUserStore } from '@/store'
import managePage from './c/manager-item.vue'

const userStore = useUserStore()

/** 订单类型  0: 销售订单  1:样品订单 */
const orderType = ref(0)

const current = ref(0)

const NormalList = ref([
    { name: '全部', type: -1 },
    { name: '待付款', type: 1 },
    { name: '待发货', type: 3 },
    { name: '待收货', type: 4 },
    { name: '已完成', type: 5 },
    { name: '已取消', type: 7 }
])
const SampleList = ref([
    { name: '全部', type: -1 },
    { name: '待审核', type: 0 },
    { name: '待付款', type: 1 },
    { name: '待发货', type: 3 },
    { name: '待收货', type: 4 },
    { name: '待还货', type: 8 },
    { name: '还货中', type: 9 },
    { name: '已完成', type: 5 },
    { name: '已取消', type: 7 }
])

const tabsList = computed(() => {
    return orderType.value === 1 ? SampleList.value : NormalList.value
})

/** 订单 搜索参数 */
const queryParam = reactive({
    merchantId: userStore.userInfo.merchantId,
    orderType: orderType.value,
    status: tabsList.value[current.value].type == -1 ? undefined : tabsList.value[current.value].type,
    current: 1,
    keyword: ''
})
/** 搜索关键词 */
const keyword = ref('')

const list = ref([])

/** 组件 z-paging 中的参数 */
const paging: any = ref(null)

/** 计算 滚动部分高度  = 屏幕高度 - statusbar高度 - 导航栏高度 - 标签切换栏的高度 - 搜索过滤框的高度*/
const scrollHeight = computed(() => {
    let sys = uni.getSystemInfoSync()
    return sys.screenHeight - (sys.statusBarHeight || 0) - 150 + 'px'
})

const cancelRef: any = ref(null)

onLoad((option: any) => {
    orderType.value = option.isSample == 'true' ? 1 : 0
    tabsList.value.filter((m: any, i: number) => {
        if (m.name == option.name) {
            current.value = i
        }
    })
    // 初始化 参数
    queryParam.merchantId = userStore.userInfo.merchantId
    queryParam.orderType = orderType.value
    queryParam.status = tabsList.value[current.value].type == -1 ? undefined : tabsList.value[current.value].type
})

const queryOrderList = () => {
    orderType.value = 0
    current.value = 0
    // this.mescroll.resetUpScroll();
}

const filter = () => {
    // this.canUpdate = false
    uni.$u.$MRouter.orderFilter.to()
}

// 标签页切换
const tabsChange = (index: number) => {
    current.value = index
    queryParam.status = tabsList.value[index].type == -1 ? undefined : tabsList.value[index].type
    // 每次标签页切换的时候 都需要重新请求数据
    paging.value.reload()
}
const upCallback = (pageNo: number) => {
    queryParam.current = pageNo
    let para = uni.$u.$tools.dealNullParams(queryParam)
    uni.$u.$api.OrderApi.queryOrderListPage(para)
        .then((res: any) => {
            res.records.forEach((record: any) => {
                record.open = false
                record.uuid = uni.$u.guid(8)
                let sub: Array<any> = []
                let count = 0
                record.skus.forEach((m: any) => {
                    let child: Array<any> = []
                    let sum = 0
                    m.sku.forEach((it: any) => {
                        it.price = it.singlePrice
                        child.push(it)
                        sum += it.num
                    })
                    sub.push({
                        name: m.name,
                        picId: m.picId,
                        list: child,
                        num: sum,
                        total: child
                            .map(m => m.totalPrice)
                            .reduce((p, c) => {
                                return p + c
                            }),
                        uuid: uni.$u.guid(6)
                    })
                    count += sum
                    // 检测下架
                    if (m.state === 1) record.isGoodUnSale = true
                })
                record.picId = record.skus[0].picId
                record.totalNum = count
                record.orderType = orderType.value
                record.skus = sub
            })
            // list.value = list.value.concat(res.records)
            // this.mescroll.endByPage(res.records.length, res.pages);
            paging.value.complete(res.records)
        })
        .catch((e: any) => {
            console.error(e)
            paging.value.complete(false)
        })
}
/** 取消订单 */
const cancelTheOrder = (id: number | string) => {
    cancelRef.value?.open(id)
}

const downCallback = () => {
    // 重置为第一页
    queryParam.current = 1
    paging.value.reload()
}

const scroll = (id: number | string) => {
    const query = uni.createSelectorQuery().in(this)
    let idStr = '#or' + id
    query
        .select(idStr)
        .boundingClientRect((re: any) => {
            let offset = re.top - 160 - (uni.getSystemInfoSync().statusBarHeight || 0)
            paging.value.scrollToY(offset)
        })
        .exec()
}
// 变更搜索条件 刷新页面
const search = (e: string) => {
    queryParam.keyword = e
    if (tabsList.value[current.value].type != -1) queryParam.status = tabsList.value[current.value].type
    // this.mescroll.resetUpScroll();
    paging.value.reload()
}
</script>

<style scoped lang="scss">
.filter-btn {
    margin-right: 30rpx;
}
.metabs {
    z-index: 999;
    background-color: #ffffff;
}

.search-bar {
    margin: 20rpx;
    border: 2rpx solid rgba(255, 36, 66, 0.7);
    box-shadow: 0 5rpx 16rpx 0rpx rgba(128, 129, 129, 0.5);
    background: #ffffff;
    border-radius: 38rpx;
}

.slot-wrap {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.selected {
    color: $cf-primary;
    border-bottom: 1rpx solid $cf-primary;
    font-weight: 600;
}

.container {
    box-sizing: border-box;
    height: 100vh;
    .mescroll {
        display: flex;
        flex-direction: column;
    }
}
</style>
